<template>
	<view v-if="loading==true">
		<view class="cardBox" v-if="completion_list">
			<view class="flex" style="margin-top: 10rpx;">
				<rich-text :nodes="completion_list"></rich-text>
			</view>
			<view style="height: 10rpx;width: 100%;"></view>
		</view>

		<view class="cardBox" v-if="orderDetail.user_id==orderDetail.release_user.id">
			<view style="margin-top: 10px;margin-bottom: 10px;text-align: center;">{{text.xieyi}}</view>
			<view class="flex w9" style="margin-top: 10rpx;">
				<view class="w3">{{$t('赔付原因')}}</view>
				<view class="w3">{{$t('赔付比例')}} % </view>
				<view class="w3">{{$t('情况说明')}}</view>
			</view>
			<view class="flex w9">
				<view class="w3">{{$t('货物破损')}}</view>
				<view class="w3"><input v-model="form[1]['value2']" type="number" :placeholder="$t('请输入')" /></view>
				<view class="w3"><input v-model="form[1]['value3']" type="text" :placeholder="$t('请输入')" /></view>
			</view>
			<view class="flex w9">
				<view class="w3">{{$t('货物丢失')}}</view>
				<view class="w3"><input v-model="form[2]['value2']" type="number" :placeholder="$t('请输入')" /></view>
				<view class="w3"><input v-model="form[2]['value3']" type="text" :placeholder="$t('请输入')" /></view>
			</view>
			<view class="flex w9">
				<view class="w3">{{$t('超时')}}</view>
				<view class="w3"><input v-model="form[3]['value2']" type="number" :placeholder="$t('请输入')" /></view>
				<view class="w3"><input v-model="form[3]['value3']" type="text" :placeholder="$t('请输入')" /></view>
			</view>
			<view class="flex w9">
				<view class="w3">{{$t('质量问题')}}</view>
				<view class="w3"><input v-model="form[4]['value2']" type="number" :placeholder="$t('请输入')" /></view>
				<view class="w3"><input v-model="form[4]['value3']" type="text" :placeholder="$t('请输入')" /></view>
			</view>
			<view class="flex w9" v-for="(item,index) in form1" :key="index">
				<view class="w3"><input v-model="item[0]" type="text" :placeholder="$t('请输入')" /></view>
				<view class="w3"><input v-model="item[1]" type="number" :placeholder="$t('请输入')" /></view>
				<view class="w3" style="position: relative;">
					<input v-model="item[2]" type="text" :placeholder="$t('请输入')" />
					<view style="position: absolute; font-size: 40rpx; left: 105%;top: -5rpx;"
						@click="jian(item,index)">-</view>
				</view>

			</view>


			<button @click="add"
				style="width: 80%;margin-left: 10%;margin-top: 15rpx;font-size: 12px;">{{$t('立即添加')}}</button>

			<view style="height: 40rpx;width: 100%;"></view>
		</view>


		<view class="cardBox"
			v-if="(orderDetail.user_id!=orderDetail.release_user.id)&&(orderDetail.orderInfo.is_compensation==1)">
			<view style="margin-top: 10px;margin-bottom: 10px;text-align: center;">{{text.xieyi}}</view>
			<view class="flex w9" style="margin-top: 10rpx;">
				<view class="w3">{{$t('赔付原因')}}</view>
				<view class="w3">{{$t('赔付比例')}} % </view>
				<view class="w3">{{$t('情况说明')}}</view>
			</view>
			<view class="flex w9">
				<view class="w3">{{$t('货物破损')}}</view>
				<view class="w3"><input v-model="form[1]['value2']" type="number" :disabled="true"
						:placeholder="$t('请输入')" /></view>
				<view class="w3"><input v-model="form[1]['value3']" type="text" :disabled="true"
						:placeholder="$t('请输入')" /></view>
			</view>
			<view class="flex w9">
				<view class="w3">{{$t('货物丢失')}}</view>
				<view class="w3"><input v-model="form[2]['value2']" type="number" :disabled="true"
						:placeholder="$t('请输入')" /></view>
				<view class="w3"><input v-model="form[2]['value3']" type="text" :disabled="true"
						:placeholder="$t('请输入')" /></view>
			</view>
			<view class="flex w9">
				<view class="w3">{{$t('超时')}}</view>
				<view class="w3"><input v-model="form[3]['value2']" type="number" :disabled="true"
						:placeholder="$t('请输入')" /></view>
				<view class="w3"><input v-model="form[3]['value3']" type="text" :disabled="true"
						:placeholder="$t('请输入')" /></view>
			</view>
			<view class="flex w9">
				<view class="w3">{{$t('质量问题')}}</view>
				<view class="w3"><input v-model="form[4]['value2']" type="number" :disabled="true"
						:placeholder="$t('请输入')" /></view>
				<view class="w3"><input v-model="form[4]['value3']" type="text" :disabled="true"
						:placeholder="$t('请输入')" /></view>
			</view>
			<view class="flex w9" v-for="(item,index) in form1" :key="index">
				<view class="w3"><input v-model="item[0]" type="text" :disabled="true" :placeholder="$t('请输入')" />
				</view>
				<view class="w3"><input v-model="item[1]" type="number" :disabled="true" :placeholder="$t('请输入')"  />
				</view>
				<view class="w3" style="position: relative;">
					<input v-model="item[2]" type="text" :placeholder="$t('请输入')" />
				</view>

			</view>
			<view style="height: 40rpx;width: 100%;"></view>
		</view>


		<block v-if="orderDetail.orderInfo.status!=3&&orderDetail.orderInfo.status!=5&&orderDetail.orderInfo.close_status!=1&&orderDetail.orderInfo.terminate_status!=1">
			<view style="display: flex;width:90%;margin-left:5%"
				v-if="orderDetail.user_id==orderDetail.release_user.id">
				<view style="width: 50%;">
					<u-button @click="save" style="" :custom-style="customStyle3" hover-class="none" type="primary">
						{{ $t('保存') }}
					</u-button>
				</view>
				<view style="width: 50%;">
					<u-button @click="uploadCompensation" style="" :custom-style="customStyle2" hover-class="none"
						type="primary">
						{{ $t('上传') }}
					</u-button>
				</view>
			</view>
		</block>

		<block v-if="orderDetail.orderInfo.status!=3&&orderDetail.orderInfo.status!=5&&orderDetail.orderInfo.close_status!=1&&orderDetail.orderInfo.terminate_status!=1">
			<view style="display: flex;width:90%;margin:0 auto;"
				v-if="orderDetail.user_id!=orderDetail.release_user.id">
				<block v-if="orderDetail.orderInfo.is_compensation==1&&orderDetail.orderInfo.compensation_standards">
					<block
						v-if="orderDetail.orderJoin.is_compensation==0||orderDetail.orderJoin.is_compensation==null||orderDetail.orderJoin.is_compensation==2">
						<view style="width: 100%;text-align: center;">
							<view @click="agreeCompensation" style="width:255rpx;height:83rpx;border:1px solid #18d62a;text-align:center;
							 margin-top:20rpx;background-color: #18d62a;border-radius: 56rpx;line-height: 45px;color: #fff;">
								{{ $t('同意') }}
							</view>
						</view>
						<view style="width: 50%;text-align: center;">
							<view @click="jujueCompensation" style="width:255rpx;height:83rpx;border:1px solid #ff2323;text-align:center;
							 margin-top:20rpx;background-color: #ff2323;border-radius: 56rpx;line-height: 45px;color: #fff;">
								{{ $t('拒绝') }}
							</view>
						</view>
					</block>
				</block>

			</view>
		</block>
		
		<view style="height: 40rpx;width: 100%;"></view>


	</view>
</template>


<script>
	import {
		HTTP_REQUEST_URL,
		HTTP_IMG_UTL,
		IMAGE_URL
	} from "@/config/app";

	export default {
		components: {

		},
		data() {
			return {
				//远程域名
				HTTP_IMG_UTL,
				HTTP_REQUEST_URL,
				IMAGE_URL,
				url: IMAGE_URL,

				//语言
				lang: this.$i18n.locale,
				//文字
				text: {
					xieyi: this.$t('赔付标准')
				},
				form: [{
						value1: this.$t('赔付原因'),
						value2: this.$t('赔付比例'),
						value3: this.$t('情况说明')
					},
					{
						value1: this.$t('货物破损'),
						value2: '',
						value3: ''
					},
					{
						value1: this.$t('货物丢失'),
						value2: '',
						value3: ''
					},
					{
						value1: this.$t('超时'),
						value2: '',
						value3: ''
					},
					{
						value1: this.$t('质量问题'),
						value2: '',
						value3: ''
					},

				],
				form1: [{
					value1: '',
					value2: '',
					value3: ''
				}, ],
				customStyle2: {
					width: '255rpx',
					height: '83rpx',
					marginTop: '20rpx',
					background: '#ff2323',
					borderRadius: '56rpx'
				},
				customStyle3: {
					width: '255rpx',
					height: '83rpx',
					marginTop: '20rpx',
					background: '#18d62a',
					borderRadius: '56rpx'
				},
				subDisabled: false,
				loading: false,
				completion_list: '',
				orderDetail: {
					orderInfo:{},
					release_user: {}
				}
			}
		},
		onLoad(options) {
			this.order_id = options.order_id;
			this.join_order_id = options.join_order_id;
			this.getCooperationOrderDetail()

		},
		onReady() {
			uni.setNavigationBarTitle({ //自定义标题
				title: this.$t('验货及赔付标准协议')
			})
		},
		methods: {
			//合作订单详情
			getCooperationOrderDetail() {
				const that = this
				that.$u.api.order.getCooperationOrderDetail({
					id: that.join_order_id,
					lang: that.lang
				}).then(res => {
					that.orderDetail = res
					that.completion()
				})
			},
			//赔付协议
			completion() {
				const that = this
				that.$u.api.order.completion({
					order_id: that.order_id,
					join_order_id: that.join_order_id,
					lang: that.lang
				}).then(res => {
					that.completion_list = res.completion

					var form = res.form
					if (form.compensation_standards) {
						if (that.lang == 'zh') {
							var compensation_standards = JSON.parse(form.compensation_standards.replace(/'/g, '"'))
						} else {
							var compensation_standards = JSON.parse(form.compensation_standards_ru.replace(/'/g,
								'"'))
						}

						if (compensation_standards) {
							console.log(compensation_standards)

							that.form = [{
									value1: compensation_standards[0][0],
									value2: compensation_standards[0][1],
									value3: compensation_standards[0][2]
								},
								{
									value1: compensation_standards[1][0],
									value2: compensation_standards[1][1],
									value3: compensation_standards[1][2]
								},
								{
									value1: compensation_standards[2][0],
									value2: compensation_standards[2][1],
									value3: compensation_standards[2][2]
								},
								{
									value1: compensation_standards[3][0],
									value2: compensation_standards[3][1],
									value3: compensation_standards[3][2]
								},
								{
									value1: compensation_standards[4][0],
									value2: compensation_standards[4][1],
									value3: compensation_standards[4][2]
								},
							]
							var arr = []
							for (var i = 0; i < compensation_standards.length; i++) {
								if (i > 4) {
									arr.push(compensation_standards[i])
								}
							}
							that.form1 = arr
							console.log(that.form1)
						}
					}



					that.loading = true
				})
			},

			uploadCompensation() {
				const that = this
				that.$u.api.order.uploadCompensation({
					order_id: that.order_id,
					join_order_id: that.join_order_id,
					lang: that.lang
				}).then(res => {
					uni.showModal({
						content: that.$t('操作成功'),
						showCancel: false,
						confirmText: that.$t('是'),
					})
					
					setTimeout(function() {
						uni.redirectTo({
							url: '/pages/ordering/orderDetail?id='+that.order_id+'&join_order_id='+that.join_order_id+'&status='+that.orderDetail.orderInfo.status+'&isDetail=true'
						  });
					}, 2000);
				})
			},
			agreeCompensation() {
				const that = this
				that.$u.api.order.agreeCompensation({
					order_id: that.order_id,
					join_order_id: that.join_order_id,
					lang: that.lang
				}).then(res => {
					uni.showModal({
						content: that.$t('操作成功'),
						showCancel: false,
						confirmText: that.$t('是'),
					})
					
					setTimeout(function() {
						uni.redirectTo({
							url: '/pages/ordering/orderDetail?id='+that.order_id+'&join_order_id='+that.join_order_id+'&status='+that.orderDetail.orderInfo.status+'&isDetail=true'
						  });
					}, 2000);
				})
			},
			jujueCompensation() {
				const that = this
				that.$u.api.order.jujueCompensation({
					order_id: that.order_id,
					join_order_id: that.join_order_id,
					lang: that.lang
				}).then(res => {
					uni.showModal({
						content: that.$t('操作成功'),
						showCancel: false,
						confirmText: that.$t('是'),
					})
					
					setTimeout(function() {
						uni.redirectTo({
							url: '/pages/ordering/orderDetail?id='+that.order_id+'&join_order_id='+that.join_order_id+'&status='+that.orderDetail.orderInfo.status+'&isDetail=true'
						  });
					}, 2000);
				})
			},
			add() {
				this.form1.push({
					value1: '',
					value2: '',
					value3: ''
				})
			},
			jian(item, index) {
				this.form1.splice(index, 1); // 删除指定索引的输入框
			},
			save() {
				var arr = []
				for (var i = 0; i < this.form.length; i++) {
					arr.push(this.form[i])
				}
				for (var i = 0; i < this.form1.length; i++) {
					arr.push(this.form1[i])
				}
				const that = this
				uni.showLoading({
					title: "Loading...",
					mask: true
				})
				that.$u.api.order.compensationStandards({
					order_id: that.order_id,
					join_order_id: that.join_order_id,
					compensationStandards: JSON.stringify(arr),
					lang: that.lang
				}).then(res => {
					uni.hideLoading();
					
					uni.showModal({
						content: that.$t('操作成功'),
						showCancel: false,
						confirmText: that.$t('是'),
					})
					
					
				})

			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/common/orderDetail.scss";

	.w3 {
		width: 33%;
		border: 1px solid #ccc;
		text-align: center;
		justify-content: center;
		align-items: center;
		font-size: 14rpx;
		display: flex;
		height: 50rpx;
		line-height: 50rpx;
	}

	.w9 {
		width: 90%;
		margin-left: 5%;
	}

	.w3 input {
		font-size: 14rpx;
	}
</style>